<template>
    <div class="layout">
        <div class="layout" ref="MapView"></div>
        <div class="control">
            <CheckboxGroup v-model="heights">
                <span>高度：</span>
                <Checkbox :label="137">
                    <span>137</span>
                </Checkbox>
            </CheckboxGroup>
            {{ heights }}
            <CheckboxGroup v-model="Colors">
                <span>状态：</span>
                <Checkbox :label="1">
                    <span>截获</span>
                </Checkbox>
                <Checkbox :label="2">
                    <span>定位</span>
                </Checkbox>
                <Checkbox :label="3">
                    <span>解调</span>
                </Checkbox>
            </CheckboxGroup>
            {{ Colors }}
        </div>
    </div>
</template>
<script>
import simpleMap from '../../components/simpleMap';
// import dataEvent from './data.worker.pnpm.js'
import IndexArray from './data.js'
import kafka from './kafka'

var worker = null;

var map = null;
var mapConfig = [{
    "type": "TD", "name": "天地图", "layerType": "background", "default": false,
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
}]




export default {
    data() {
        return {
            heights: [137],
            Colors: [1, 2, 3],
        }
    },
    watch: {
        heights(val) {
            worker.postMessage(JSON.stringify({
                EventName: 'ChangeSelectConfig',
                Config: {
                    HeightArray: this.heights,
                    ColorArray: this.Colors
                }
            }))
        },
        Colors(val) {
            worker.postMessage(JSON.stringify({
                EventName: 'ChangeSelectConfig',
                Config: {
                    HeightArray: this.heights,
                    ColorArray: this.Colors
                }
            }))
        }
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView);
        map.addProviders(mapConfig);
        map.flytochina();
        
        worker = new Worker('./TestWorker/data.worker.js');
        worker.postMessage(JSON.stringify({
            EventName: 'StartMapEvent',
            Config: '1656916682165'
        }))
        var Colors = {
            0: Cesium.Color.WHITE.withAlpha(0.7),
            1: Cesium.Color.YELLOW.withAlpha(0.7),
            2: Cesium.Color.ORANGE.withAlpha(0.7),
            3: Cesium.Color.RED.withAlpha(0.7),
        }
        let _kafka = new kafka('ws://127.0.0.1:3001/ws');

        _kafka.on('Message', res => {
            worker.postMessage(JSON.stringify({
                EventName: 'SetAllDataArray',
                Config: res
            }))
        })
        worker.postMessage(JSON.stringify({
            EventName: 'ChangeIndexNumber',
            Config: IndexArray
        }))
        var viewer = map.getViewer();
        var scene = viewer.scene;
        const collection = new Cesium.PrimitiveCollection();
        scene.primitives.add(collection);
        // worker.name = "worker" + name;
        // worker.postMessage('a');
        worker.onmessage = function (event) {
            // console.log("onmessage", event.data.EventName);
            if (event.data.EventName == 'SetMapData') {
                var instances = [];
                for (let i = 0; i < event.data.value.length; i++) {
                    const element = event.data.value[i];
                    instances.push(new Cesium.GeometryInstance({
                        geometry: new Cesium.RectangleGeometry({
                            rectangle: Cesium.Rectangle.fromDegrees(element.R[0], element.R[3], element.R[2], element.R[1])
                        }),
                        attributes: {
                            color: Cesium.ColorGeometryInstanceAttribute.fromColor(Colors[element.C])
                        }
                    }));
                }
                collection.add(new Cesium.Primitive({
                    geometryInstances: instances, //合并
                    //某些外观允许每个几何图形实例分别指定某个属性，例如：
                    appearance: new Cesium.PerInstanceColorAppearance()
                }));
            } else if (event.data.EventName == 'ClearMap') {
                collection.removeAll()
            }
        };
    },
    methods: {
        readFile(url) {
            let xhr = new XMLHttpRequest();
            xhr.open('GET', url, false);
            xhr.overrideMimeType("text/html;charset-utf8");
            xhr.send(null);
            return xhr.status === 200 ? xhr.responseText : null;
        },
    },
    beforeDestroy() {
        worker.postMessage(JSON.stringify({
            EventName: 'destroy'
        }))
        worker.terminate()
        map && map.destroy();
    }
}
</script>

<style scoped>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
}
</style>